<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <!-- <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M131.11 192.37m32.17 0l700.08 0q32.17 0 32.17 32.17l0 0q0 32.17-32.17 32.17l-700.08 0q-32.17 0-32.17-32.17l0 0q0-32.17 32.17-32.17Z" fill="#ffffff" /><path d="M131.11 766.83m32.17 0l700.08 0q32.17 0 32.17 32.17l0 0q0 32.17-32.17 32.17l-700.08 0q-32.17 0-32.17-32.17l0 0q0-32.17 32.17-32.17Z" fill="#ffffff" /><path d="M449.33 385.09m32.17 0l381.87 0q32.17 0 32.17 32.17l0 0q0 32.17-32.17 32.17l-381.87 0q-32.17 0-32.17-32.17l0 0q0-32.17 32.17-32.17Z" fill="#ffffff" /><path d="M449.33 578.11m32.17 0l381.87 0q32.17 0 32.17 32.17l0 0q0 32.17-32.17 32.17l-381.87 0q-32.17 0-32.17-32.17l0 0q0-32.17 32.17-32.17Z" fill="#ffffff" /><path d="M129.91 512.16L321.14 639.7V384.62L129.91 512.16z" fill="#ffffff" />
    </svg> -->
    <svg 
        width="20px" 
        height="20px" 
        viewBox="0 0 20 20" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>编组 3</title>
        <g id="新单录入" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="首页-展开" transform="translate(-276.000000, -22.000000)">
                <g id="编组-24" transform="translate(260.000000, 0.000000)">
                    <g id="编组-3" transform="translate(16.000000, 22.000000)">
                        <rect id="矩形" fill="#696969" opacity="0" x="0" y="0" width="20" height="20"></rect>
                        <rect id="矩形备份-4" stroke="#4E5969" fill="#4E5969" x="8.32203842" y="7.58758559" width="9.13233066" height="1" rx="0.5"></rect>
                        <rect id="矩形" stroke="#4E5969" fill="#4E5969" x="2.01434298" y="3.42091892" width="15.4400261" height="1" rx="0.5"></rect>
                        <rect id="矩形备份-3" stroke="#4E5969" fill="#4E5969" x="2.01434298" y="15.9209189" width="15.4400261" height="1" rx="0.5"></rect>
                        <rect id="矩形备份-2" stroke="#4E5969" fill="#4E5969" x="8.32203842" y="11.7542523" width="9.13233066" height="1" rx="0.5"></rect>
                        <path d="M3.24662602,9.5711826 L4.57250999,11.1695228 L2.33483872,11.4253289 L3.24662602,9.5711826 Z" id="三角形" stroke="#4E5969" fill="#4E5969" transform="translate(3.389343, 10.151052) rotate(-90.000000) translate(-3.389343, -10.151052) "></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: #8A949F;
}

.hamburger.is-active {
  transform: rotate(180deg);
}

.navbar .hamburger-container{
    padding: 15px !important;
}
</style>
